<!-- 
  验证码组件
 -->

<template>
  <div class="captcha" v-html="svg" @click="refresh"></div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      svg: "",
    };
  },
  methods: {
    refresh() {
      axios
        .get("/api/admin/base/open/captcha")
        .then((response) => {
          console.log("response", response);
          const { data } = response;
          // 判断业务状态码
          if (data.code !== 1000) {
            return alert(data.message);
          }
          // 将 data.data.data => this.svg
          this.svg = data.data.data;

          console.log("this.svg", this.svg);
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
  },

  created() {
    this.refresh();
  },
};
</script>

<style lang="scss" scoped>
.captcha {
  width: 140px;
  height: 40px;
  background-color: #ccc;

  ::v-deep(svg) {
    width: 100%;
    height: 100%;
  }
}
</style>
